<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div></div>
  <script>
    let div = document.querySelector('div');
    let ajax = new XMLHttpRequest();
    ajax.open('get', `/shop`);
    ajax.send();
    ajax.onreadystatechange = function () {
      if (ajax.readyState == 4 && ajax.status == 200) {
        console.log(ajax.responseText); //获取的回应信息是字符串，需要转对象
        let data = JSON.parse(ajax.responseText);
        let str = '';
        data.forEach(item => {
          str += `<ul>
            <li><img src="${item.picture}" alt=""></li>
            <li>商品信息:${item.tradeName}</li>
            <li>价格:${item.price}</li>
            <li>stock:${item.stock}</li>
          </ul>`
        });
        div.innerHTML = str;
      }
    }
  </script>
</body>

</html>